/* eslint-disable react-hooks/exhaustive-deps */
import React, { useContext } from 'react';
import ReactEcharts from 'echarts-for-react';
import { Row, Col, Empty } from 'antd';
import ProForm, { ProFormSelect } from '@ant-design/pro-form';
import styles from './index.less';
import { XoProTable } from '@/components/XoProTable';
import { useEffect } from 'react';
import { getListMapData, getListUnlock } from '@/services/student';
import { useState } from 'react';
import { CourseContext } from '..';
import moment from 'moment';
import { baseUrl } from '../../../../../config/httpUrl';
export default function Emigrated() {
  const [xData, setXData] = useState<any>();
  const [yData, setfirstData] = useState<any>();
  const [y1Data, setendData] = useState<any>();
  const [count, setCount] = useState<any>();
  const [name, setName] = useState<any>();
  const [option, setOption] = useState<any>();
  const [show, setShow] = useState<boolean>(false);
  const [show1, setShow1] = useState<boolean>(false);
  const ctx = useContext(CourseContext);


  useEffect(() => {
    (async () => {
      const res = await getListMapData({ uid: ctx.uid, activityId: ctx.courseId })
      const data1 = res.result?.map((item: { mapPassName: string, mapName: string }) => {
        return `${item.mapName}-${item.mapPassName}`
      })
      setXData(data1)
      if (data1?.length > 0) {
        if (data1?.length > 4) {
          setShow1(true)
        } else {
          setShow1(false)

        }
      }
      const data2 = res.result?.map((item: { firstStar: string; }) => {
        return item.firstStar
      })
      setfirstData(data2)
      const data3 = res.result?.map((item: { endStar: string; }) => {
        return item.endStar
      })
      setendData(data3)
      const data4 = res.result?.map((item: { mapName: string, mapPassName: string }) => {
        return `${item.mapName}-${item.mapPassName}`
      })
      setName(data4)
      if (data4?.length > 0) {
        if (data4?.length > 5) {
          setShow(true)
        } else {
          setShow(false)

        }
      }
      const data5 = res.result?.map((item: { repeat: string }) => {
        return item.repeat
      })
      setCount(data5)

    })()
  }, [ctx])

  const option1 = {
    tooltip: {
      trigger: 'axis'
    },
    legend: {
      orient: 'horization',
      x: 'right',
      y: 'center',
      data: ['首次得星', '当前得星']
    },
    grid: {
      right: '120',
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },
      axisLabel: {
        interval: 0, rotate: -25,
        textStyle: {
          color: '#000',
          fontSize: 12,

        }
      },
      data: xData
    },
    yAxis: {
      type: 'value',
      // max: 10,
      axisLine: {
        show: true,
      },
      splitNumber: 10,
      minInterval: 1,

    },
    dataZoom: [
      {
        type: 'slider',
        realtime: true,
        start: 0,
        end: Math.floor(100 / (xData?.length / 4)),  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        height: 5, //组件高度
        bottom: 10, //下边的距离
        show: show1,  // 是否展示
        fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
        borderColor: "rgba(17, 100, 210, 0.12)",
        handleSize: 0,      //两边手柄尺寸
        showDetail: false, //拖拽时是否展示滚动条两侧的文字
        zoomLock: true,         //是否只平移不缩放
        moveOnMouseMove: false //鼠标移动能触发数据窗口平移
        //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
      },
      {
        type: 'inside', // 内置在坐标系中
        start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        end: Math.floor(100 / (xData?.length / 4)), // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        zoomOnMouseWheel: false,  // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
      }
    ],
    series: [
      {
        name: '首次得星',
        type: 'bar',
        symbolSize: 10,
        symbol: 'circle',
        barWidth: 30,

        itemStyle: {
          normal: {
            color: "#ff5e5c",
            lineStyle: {
              color: "#ff5e5c"
            }, label: {
              show: true,
              position: 'top'
            }
          }
        },
        data: yData
      },
      {
        name: '当前得星',
        type: 'bar',
        symbol: 'circle',
        symbolSize: 10,
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "#ff9d50",
            lineStyle: {
              color: "#ff9d50"
            }, label: {
              show: true, position: 'top'

            }
          }
        },
        data: y1Data
      }
    ]
  }
  const option2 = {
    tooltip: {
      trigger: 'axis'
    },

    legend: {
      orient: 'horization',
      x: 'right',
      y: 'center',
      data: ['答题次数']
    },
    grid: {
      right: '120',
      top: '10'
    },
    xAxis: {
      type: 'category',
      axisTick: {
        show: false
      },

      axisLabel: {
        interval: 0, rotate: -25,
        textStyle: {
          color: '#000',
          fontSize: 12,

        }
      },
      data: name
    },
    yAxis: {
      type: 'value',
      min: 0,
      axisLine: {
        show: true,
      },
      splitNumber: 10,
      minInterval: 1,

    },
    dataZoom: [
      {
        type: 'slider',
        realtime: true,
        start: 0,
        end: Math.floor(100 / (name?.length / 5)),  // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        height: 5, //组件高度
        bottom: 10, //下边的距离
        show: show,  // 是否展示
        fillerColor: "rgba(17, 100, 210, 0.42)", // 滚动条颜色
        borderColor: "rgba(17, 100, 210, 0.12)",
        handleSize: 0,      //两边手柄尺寸
        showDetail: false, //拖拽时是否展示滚动条两侧的文字
        zoomLock: true,         //是否只平移不缩放
        moveOnMouseMove: false //鼠标移动能触发数据窗口平移
        //zoomOnMouseWheel: false, //鼠标移动能触发数据窗口缩放
      },
      {
        type: 'inside', // 内置在坐标系中
        start: 0, // 数据窗口范围的起始百分比。范围是：0 ~ 100。表示 0% ~ 100%。
        end: Math.floor(100 / (name?.length / 5)), // 数据窗口范围的结束百分比。范围是：0 ~ 100。
        zoomOnMouseWheel: false,  // 关闭滚轮缩放
        moveOnMouseWheel: true, // 开启滚轮平移
        moveOnMouseMove: true  // 鼠标移动能触发数据窗口平移
      }
    ],
    series: [
      {
        name: '答题次数',
        type: 'line',
        symbolSize: 10,
        symbol: 'circle',
        itemStyle: {
          normal: {
            color: "#ff5e5c",
            lineStyle: {
              color: "#ff5e5c"
            }, label: {
              show: true
            }
          }
        },
        data: count
      },

    ]
  }

  const goSeeClass = (paperId: any) => {
    const w = window.open('_black');
    w!.location.href = `${baseUrl.http?.replace('/api', '')}/gogame/?scene=quizViewDetail&paperId=${paperId}`
  }
  const columns: any = [
    {
      dataIndex: 'mapPassName',
      title: '关卡名称',
      width: 80,
      render: (text: any, record: any) => (
        <span>{record.passType == 3 ? '宝箱' : text}</span>
      )
    },
    {
      dataIndex: 'repeat',
      title: '作答次数', width: 80,
      ellipsis: true,

    },
    {
      dataIndex: 'firstStar',
      title: '首次答题得星',
      width: 80,
      ellipsis: true,

    },
    {
      dataIndex: 'endStar',
      title: '末次答题得星',
      width: 80,
      ellipsis: true,

    },
    {
      dataIndex: 'avgTime',
      title: '平均答题时间',
      width: 80,
      ellipsis: true,

      render: (text: any, record: any) => (
        <span>{record.avgTime || '-'}</span>
      )
    },
    {
      dataIndex: 'opti',
      title: '操作',
      width: 80,
      ellipsis: true,
      // fixed: 'right',
      render: (text: any, record: any) => (
        <a href='javascript:;' onClick={() => goSeeClass(record?.mapId)}>查看试卷</a>
      )
    },
  ]


  return (
    <div style={{ margin: "0 auto 20px" }}>
      {
        xData?.length !== 0 ?
          <ReactEcharts notMerge style={{ marginBottom: "20px" }} option={option1} /> : <Empty description={'关卡还没有解锁哦'} image={Empty.PRESENTED_IMAGE_SIMPLE} />

      }
      {
        y1Data?.length !== 0 ?
          < ReactEcharts notMerge option={option2} /> : <Empty description={'关卡还没有解锁哦'} image={Empty.PRESENTED_IMAGE_SIMPLE} />
      }
      <div style={{ textAlign: 'left', marginTop: '20px' }}>
        <Row className={styles.right_pro_form_style}>
          <Col span={18}>
            <ProForm
              style={{ width: "70%", float: 'right' }}
              layout="horizontal"
              colon={true}
              labelAlign='right'

            >
              <ProFormSelect
                colProps={{ xl: 8, md: 12 }}
                label="选择关卡"
                name="required"
                fieldProps={{
                  onChange: (val) => setOption(val),
                  value: option,
                  allowClear: false
                }}
                params={{
                  activityId: ctx.courseId, pageSize: -1
                }}
                request={async (params) => {
                  const res = await getListUnlock({ ...params });
                  const list = res.result?.map((item: any) => {
                    return { label: `${item.mapName}${item.unlockTime ? "(" : ""}${item.unlockTime ? moment(item.unlockTime).format("YYYY.MM.DD") : ""}${item.unlockTime ? ")" : ""}`, value: item.mapId }
                  })
                  if (option == null) {
                    setOption(list?.[list?.length - 1]?.value);
                  }
                  return list
                }}
              />
            </ProForm>
          </Col>
        </Row>
      </div>
      <div style={{ margin: "0 20px" }}>
        {
          option == null ? null :
            <XoProTable
              search={false}
              pagination={false}
              hasIndex={false}
              options={false}
              columns={columns}
              params={{
                uid: ctx.uid,
                activityId: ctx.courseId,
                mapId: option
              }}
              scroll={{ x: 700 }}
              request={async (params) => {
                const res = (await getListMapData({ ...params }))?.result;
                return {
                  data: res
                }
              }}
            />
        }
      </div>
    </div>
  )
}
